<template>
<!-- 添加系统用户 -->
    <div>
        <manage-public-editor :el_title="title">
            <template slot="buttonEditor">
                <el-button style="float: right;" ><router-link :to="{path:'/system/user_management'}">返回</router-link></el-button>
            </template>
            <template slot="editorContent">
                <el-form label-position="left"  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm edit-from">
                    <div class="editorContent">
                        <el-form-item label="所属机构">
                                <el-select v-model="ruleForm.branchId" placeholder="请选择机构" style="width:40%" @focus="get_branchIdoptions">
                                    <el-option v-for="item in branchIdoptions" :key="item.value" :label="item.name"  :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="ruleForm.region" placeholder="请选择分类" style="width:40%">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="ruleForm.mobile" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="角色">
                                <el-select v-model="ruleForm.rolrId" placeholder="请选择角色" style="width:40%" @focus="get_rolrIddoptions">
                                    <el-option v-for="item in rolrIddoptions" :key="item.value" :label="item.name"  :value="item.id" ></el-option>
                                </el-select>
                            </el-form-item>
                        <el-form-item label="启用状态" prop="enable">
                            <el-radio-group v-model="ruleForm.enable">
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="登录名" prop="username">
                            <el-input v-model="ruleForm.username" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleAdd('ruleForm')">提交</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </template>
        </manage-public-editor>
    </div>
</template>
<script>
import branchIdoptions from "@/mixins/requsetArrys/branchIdoptions.js"
import rolrIddoptions from "@/mixins/requsetArrys/rolrIddoptions.js"
export default {
    mixins:[branchIdoptions,rolrIddoptions],
    data(){
        return{
            title:"添加系统用户",
            activeName: 'first',
            ruleForm: {
               branchId:"",
               name:"",
               sex:"",
               mobile:"",
               rolrId:"",
               enable:1,
               username:""
            },
            rules: {
                // name: [
                //     { required: true, message: '请输入活动名称', trigger: 'blur' },
                //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],
                // region: [
                //     { required: true, message: '请选择活动区域', trigger: 'change' }
                // ],
                // date1: [
                //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                // ],
                // date2: [
                //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                // ],
                // type: [
                //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                // ],
                // resource: [
                //     { required: true, message: '请选择活动资源', trigger: 'change' }
                // ],
                // desc: [
                //     { required: true, message: '请填写活动形式', trigger: 'blur' }
                // ]
            },
        };
    },
    created(){
        if(this.$route.query && this.$route.query.type === "edit"){
            let data = this.$store.getters.system_userListItem;
            if(data){
                this.ruleForm = data;
                this.title = "编辑系统用户";
                this.addorupdate = false;
                // 处理图片
                this.loadUrl = this.ruleForm.logoUrl;
            }else{
                this.title = "添加系统用户";
                this.addorupdate = true;
            }
        }
    },
    methods: {
        // 提交
        handleAdd(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.addorupdate){
                        // 添加系统用户
                        this.$store.dispatch("system/add_system_userAddObj",this.ruleForm)
                        .then(res=>{
                            if(res){
                                this.$router.push({path:'/system/user_management'})
                            };
                        })
                    }else{
                        // 编辑系统用户
                        this.$store.dispatch("system/update_system_userAddObj",this.ruleForm)
                        .then(res=>{
                            if(res){
                                this.$router.push({path:'/system/user_management'})
                            };
                        })
                    } 
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },        
    }
    
}
</script>
<style lang="scss" scope>

.edit-from{
    .firstClass{
        .el-input{
            width: auto;
        }
    }
    
}


</style>